<template>
  <jy-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
    <div class="flex justify-end mb8">
      <el-button size="small" type="primary" @click="onAdd">新 增</el-button>
      <el-button size="small" type="primary" @click="onUpdate">修 改</el-button>
    </div>
    <el-input v-model="filterText" placeholder="请输入试验室仪器" clearable size="small" prefix-icon="el-icon-search" />
    <el-tree class="dialog-tree" v-loading="loading" :data="dataList" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps" :check-strictly="true" :filter-node-method="filterNode">
      <div slot-scope="{node, data}" class="custom-tree-node" :title="node.label">{{ data.name }} {{ data.code ? `（${data.code}）` : '' }}</div>
    </el-tree>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" type="primary" @click="submitForm">确 定</el-button>
      <el-button size="small" @click="cancel">取 消</el-button>
    </div>
    <bs-instrument-add-or-update ref="addOrUpdate" @callBack="getList" />
  </jy-dialog>
</template>
<script>
import { queryBsDepartmentTree } from "@/api/dept/bsInstrument";
import { mapGetters } from "vuex";
import BsInstrumentAddOrUpdate from "./BsInstrumentAddOrUpdate.vue";
export default {
  components: { BsInstrumentAddOrUpdate },
  name: "BsInstrumentView",
  computed: {
    ...mapGetters(["deptId"])
  },
  data() {
    return {
      title: "试验室仪器",
      loading: false,
      open: false,
      ids: undefined,
      filterText: "",
      dataList: [],
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  watch: {
    // 根据名称筛选树
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {},
  mounted() {},
  methods: {
    init(ids) {
      this.ids = ids;
      this.open = true;
      this.getList();
    },
    /** 查询试验室仪器列表 */
    getList() {
      this.loading = true;
      const queryParams = {
        deptId: this.deptId
      };
      queryBsDepartmentTree(queryParams).then((response) => {
        const dataList = response.data;
        if (dataList && dataList.length > 0) {
          dataList.forEach((item) => {
            item.disabled = true;
          });
        }
        this.dataList = dataList;
        this.loading = false;
        this.$nextTick(() => {
          if (this.ids) {
            this.$refs.tree.setCheckedKeys(this.ids.split(","));
          }
        });
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    onAdd() {
      this.$refs.addOrUpdate.init();
    },
    onUpdate() {
      const arr = this.$refs.tree.getCheckedNodes();
      if (!arr || arr.length <= 0) {
        this.$message.warning("请选择仪器");
        return;
      }
      if (arr.length > 1) {
        this.$message.warning("只能选择一种仪器进行修改");
        return;
      }
      this.$refs.addOrUpdate.init(arr[0].id);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.ids = undefined;
      this.$refs.tree.setCheckedKeys([]);
    },
    submitForm() {
      const arr = this.$refs.tree.getCheckedNodes();
      if (!arr || arr.length <= 0) {
        this.$message.warning("请选择仪器");
        return;
      }
      const ids = arr.map((item) => item.id);
      const label = arr.map((item) => `${item.name}（${item.code}）`);
      this.$emit("select", { label: label.join("、"), ids: ids.join(",") });
      this.cancel();
    }
  }
};
</script>
<style lang="scss" scoped></style>
